"use client"
import React, { useEffect, useState } from 'react'
import style from './index.module.scss'
import Table from '@/components/Table'
import { Button, Col, DatePicker, Divider, Input, Popconfirm, Row, Select, Space, Typography } from 'antd'
import { getPayListApi } from '@/apis/property'

export default function Query() {
  // 当前页数
  const [pageNumber, setPageNumber] = useState(1)
  // 每页数量
  const [pageSize, setPageSize] = useState(10)
  // 总条数
  const [recordCount, setRecordCount] = useState(0)
  // 缴费状态
  const [status, setStatus] = useState('')
  // 表格价值
  const [loading, setLoading] = useState(false)

  // 列表数据源
  const [dataSource, setDataSource] = useState([])
  // columns数据
  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '费用类型',
      dataIndex: 'type_name',
      key: 'type_name',
    },
    {
      title: '住户地址',
      dataIndex: 'householdAddr',
      key: 'householdAddr',
    },
    {
      title: '缴费金额',
      dataIndex: 'amount',
      key: 'amount',
    },
    {
      title: '缴费人',
      dataIndex: 'householdName',
      key: 'householdName',
    },
    {
      title: '缴费状态',
      dataIndex: 'payment_status',
      key: 'payment_status',
    },
    // {
    //   title: '操作',
    //   dataIndex: 'id',
    //   key: 'operation',
    //   render: id => (
    //     <Space>
    //       <Button size='small' onClick={() => {
    //         // console.log(id);

    //         // setId(id)
    //         // setMode('update')
    //         // setShowChangeModel(true)
    //       }}>修改</Button>
    //       <Popconfirm
    //         title="提示"
    //         description="删除操作不可撤销!您确认吗？"
    //         okText='确认'
    //         cancelText='放弃'
    //         // onConfirm={() => deleteResident(id)}
    //       >
    //         <Button size='small' danger type=''>删除</Button>
    //       </Popconfirm>
    //     </Space>
    //   )
    // }
  ]
  // 分页信息
  const pagination = {
    current: pageNumber,
    defaultCurrent: 1,
    position: ['bottomRight'],
    total: recordCount,
    defaultPageSize: 10,
    pageSize: pageSize,
    showSizeChanger: true,
    onChange: (e, p) => getPayList(status, e, p)
  }

  // 获取数据
  const getPayList = async (status, pageNumber, pageSize) => {
    setLoading(true)
    const res = await getPayListApi(status, pageNumber, pageSize)
    setRecordCount(res.total)
    setPageSize(res.count)
    setPageNumber(res.start)
    setDataSource(res.data.map(item => ({
      key: item.fid,
      date: item.generatedTime || item.paidTime,
      ...item
    })))
    // .filter(item => {
    //   return (+new Date(item.date) > startDate) && (endDate ? +new Date(item.date) < endDate : true)
    // })
    setLoading(false)
  }

  // 开始日期
  const [startDate, setStartDate] = useState(null)
  // 开始日期改变
  const startChange = (date, dateString) => {
    setStartDate(+new Date(dateString))
  }
  // 结束日期
  const [endDate, setEndDate] = useState(null)
  // 结束日期改变
  const endChange = (date, dateString) => {
    setEndDate(+new Date(dateString))
  }

  useEffect(() => {
    getPayList('', pageNumber, pageSize)
  }, [])
  return (
    <div className={style['query-container']}>
      <Typography.Title level={3}>缴费查询</Typography.Title>
      <Divider style={{ margin: '5px 0 10px', borderColor: '#7cb305', }}></Divider>
      <Row style={{ marginBottom: '10px' }}>
        <Col span={8}>
          开始日期：<DatePicker style={{ width: '243px' }} placeholder='请输入开始日期' onChange={startChange} />
        </Col>
        <Col span={8}>
          结束日期：<DatePicker style={{ width: '243px' }} placeholder='请输入结束日期' onChange={endChange} />
        </Col>
        <Col span={4}>
          <Select
            // value={type}
            style={{ width: 160 }}
            // options={typeList}
            options={[
              { label: '全部', value: '' },
              { label: '已支付', value: '已支付' },
              { label: '未支付', value: '未支付' },
            ]}
            placeholder='缴费类型'
            onChange={e => setStatus(e)}
          />
        </Col>
        <Col span={4}>
          <Space>
            <Button style={{ width: '140px' }} type='primary' onClick={() => {
              getPayList(status, pageNumber, pageSize, startDate, endDate)
              console.log(dataSource)
            }}>查询</Button>
          </Space>
        </Col>
      </Row>
      <Table loading={loading} pagination={pagination} columns={columns} residentList={dataSource} />
    </div>
  )
}
